<template>
  <div  class="page-container">
    <!-- 加载动画 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中，请稍候...</div>
    </div>
    <div v-if="giftList.length === 0  && !loading" class="no-data-tip">
      <div class="no-data-icon">📊</div>
      暂无数据
    </div>
    <div v-if="giftList.length != 0  && !loading" style="margin: 30px;">
      <div class="project-table">
        <div class="table-header">
          <div class="table-title">礼品库存列表</div>
          <div style="display: flex; align-items: center;">
            <span style="margin-right: 8px; color: #606266; font-size: 15px;">按日期筛选库存：</span>
            <el-select
              v-model="date"
              placeholder="查看单日库存"
              clearable
              class="date-select"
              @change="handleDateChange"
            >
              <!-- 添加全部日期选项 -->
              <el-option
                key="all"
                label="全部日期"
                value=""
              />
              <!-- 原有日期选项 -->
              <el-option
                v-for="dateItem in dateOptions"
                :key="dateItem"
                :label="dateItem"
                :value="dateItem"
              />
            </el-select>
          </div>
        </div>
        <div class="gift-list-container">
          <div
            v-for="item in giftList"
            :key="item.gid"
            class="gift-item"
            :class="{ selected: selectedGifts.includes(item.gid) }"
            @click="toggleGiftSelection(item.gid)"
          >
            <div class="gift-info">
              <div class="gift-name">{{ item.gname }}</div>
              <div class="gift-quantity">库存: {{ item.stock || 0 }}</div>
            </div>
            <div
              class="selection-indicator"
              v-if="selectedGifts.includes(item.gid)"
            >
              <el-icon><Check /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据表格显示 -->
      <div class="project-table" style="margin-top: 30px">
        <div class="table-header">
          <div class="table-title">{{ giftItemObj.gname }}使用列表</div>
        </div>
        <div class="table-body">
          <el-scrollbar style="margin-bottom: 20px"> <!-- 移除height属性 -->
            <el-table
              :header-cell-style="{
                'text-align': 'center',
                height: '50px',
                color: '#999999',
                'font-size': '15px',
              }"
              v-loading="loading"
              :data="giftTableDate"
              style="width: 100%"
              :cell-style="{'text-align': 'center', height: '70px'}"
              height="880px" 
            >
              <el-table-column prop="starttime" label="日期" />
              <el-table-column prop="drawCount" label="抽中次数" />
              <el-table-column prop="completeCount" label="抽中已核销数" />
              <el-table-column prop="uncompleteCount" label="抽中未核销数" />
            </el-table>
          </el-scrollbar>
          <div
            v-if="giftTableDate.length === 0 && !loading"
            class="empty-table"
          >
            暂无数据
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { Check } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import http from "@/libs/http";
import { useRoute } from "vue-router";
const route = useRoute();
const loading = ref(false);
const showGiftDialog = ref(false);
const giftList = ref([]);
const selectedGifts = ref([]);
const giftTableDate = ref([]); //选中的礼品图表数据列表
const giftItemObj = ref(""); //选中的礼品的子项
const date = ref(''); // 已存在的日期变量
const dateOptions = ref([]); // 新增日期选项数组

const toggleGiftSelection = (giftId) => {
  giftItemObj.value = giftList.value.find((item) => item.gid === giftId);
  giftTableDate.value = giftItemObj.value.dailyData;
  
  // 更新日期选项
  dateOptions.value = [...new Set(giftItemObj.value.dailyData.map(i => i.starttime))];
  date.value = ''; // 切换礼品时重置日期选择
  
  if (selectedGifts.value.includes(giftId)) {
    selectedGifts.value = [];
  } else {
    selectedGifts.value = [giftId];
  }
};

async function getGiftStockStatus() {
  try {
    const param = {
      token: localStorage.getItem("openid"),
      activity_id: Number(route.query.site),
      date: date.value, // 使用绑定的日期值
    };
    loading.value = true;
    const response = await http.$post(
      "/hd_project/Backend/getGiftStockStatus",
      param
    );
    if (response.code == 200) {
      loading.value = false;
      giftList.value = response.data;
      
      // 初始化第一个礼品的日期选项
      if (giftList.value.length > 0) {
        dateOptions.value = [...new Set(giftList.value[0].dailyData.map(i => i.starttime))];
      }
    } else {
      loading.value = false;
      console.log("没拿到数据");
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error("获取留资数据失败");
  }
}

// 初始化
onMounted(() => {
  getGiftStockStatus().then(() => {
    // 默认选中第一个礼品
    if (giftList.value.length > 0) {
      toggleGiftSelection(giftList.value[0].gid);
    }
  });
});

// 日期变更处理函数
const handleDateChange = () => {
  // 重新获取数据刷新列表
  getGiftStockStatus();
};
</script>

<style scoped>
.project-table {
  min-height: 5vh;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
::v-deep .date-select {
  background: linear-gradient(135deg, #99d6ff 0%, #4da6ff 100%);
  border: none;
}
.date-select {
  padding: 2px;
  border-radius: 4px;
  width: 200px;
  margin-right: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gift-list-container {
  padding: 20px;
}

/* 确保表头样式统一 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #ebeef5;
}
.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.page-container {
  position: relative;
  min-height: 78vh;
  padding: 20px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3a7bb8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 16px;
  color: #3a7bb8;
}
.gift-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 20px;
  /* max-width: 1200px; */
}

.gift-item {
  padding: 12px;
  margin: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf0 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 240px;
}

.gift-item.selected {
  border-color: #4096ff;
  background: linear-gradient(135deg, #e6f2ff 0%, #d1e5ff 100%);
  box-shadow: 0 4px 16px rgba(64, 150, 255, 0.25);
  transform: translateY(-2px);
}

.gift-item:hover:not(.selected) {
  border-color: #4096ff;
  box-shadow: 0 4px 12px rgba(64, 150, 255, 0.15);
  background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
}

.gift-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gift-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.gift-quantity {
  font-size: 14px;
  color: #666;
}

.selection-indicator {
  color: #409eff;
  font-size: 20px;
  margin-top: 8px;
  text-align: right;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.no-data-tip {
  padding: 20px;
  text-align: center;
  color: #606266;
  font-size: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.5s ease-in-out;
}

.no-data-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #909399;
  animation: pulse 2s infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.gift-item.selected .selection-indicator {
  transform: scale(1.1);
  opacity: 1;
}

.table-body {
  padding: 15px;
}

.empty-table {
  padding: 30px 0;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

/* Element Plus 表格样式覆盖 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #303133;
}

.el-table tr:hover {
  background-color: #f5f7fa;
}

.el-table__empty-text {
  color: #909399;
  font-size: 14px;
}
</style>
